<template>
  <div>
    <div style="margin-top: 15%">
      <van-image
          round
          width="10rem"
          height="10rem"
          src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
      />

    </div>
    <div>

      <div>
        <!-- 可以使用 CellGroup 作为容器 -->
        <van-cell-group inset>
          <van-field v-model="user.phone" label="手机号：" placeholder="手机号" @change="checkPhone()"/>
          <van-field
              v-model="user.code"
              center
              clearable
              label="短信验证码"
              placeholder="请输入短信验证码"
          >
            <template #button>
              <van-button size="small" type="primary" :disabled="btn1" @click="sendCode()">发送验证码</van-button>
            </template>
          </van-field>
          <van-field type="password" v-model="user.password" label="新密码：" placeholder="新密码"/>
          <van-field type="password" v-model="psw" label="确认密码：" placeholder="确认密码" @change="checkPass()"/>
          <div style="margin: 16px;">
            <van-button round block type="success" :disabled="btn2" @click="findPass()">
              找回密码
            </van-button>
          </div>
        </van-cell-group>
      </div>

    </div>
    <div>
      <!-- 居中 -->
      <van-row justify="center" style="margin-top: 10px">
        <van-col span="6">
          <router-link to="/register">注册账号</router-link>
        </van-col>
        <van-col span="6"></van-col>
        <van-col span="6">
          <router-link to="/">登录账号</router-link>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "LoginView",
  data() {
    return {
      btn1: true,
      btn2: true,
      user: {//账号密码
        phone: "",
        password: "",
        code: "",
        city: "郑州",
        mobie: "华为"
      },
      psw: ""
    }
  },
  methods: {
    checkPass() {
      //校验2次密码是否一致
      if (this.psw == this.user.password) {
        this.btn2 = false;
      } else {
        this.btn2 = true;
      }
    },
    checkPhone() {
      //校验手机号是否存在
      this.axios.get("/api/user/checkphone.do?phone=" + this.user.phone).then((r) => {
        if (r.data.code == 200) {
          //存在  可以发送验证码
          this.btn1 = false;
        } else {
          this.btn1 = true;
          this.$toast("亲，你不知道手机号根本没有注册！");
        }
      })
    },
    sendCode() {
      //发送验证码
      this.axios.get("/api/sms/sendfind.do?phone=" + this.user2.name).then((r) => {
        if (r.data.code == 200) {
          //存在  可以发送验证码
          this.btn1 = true;
          this.$toast("亲，验证码发送成功，请查看手机！");
        } else {
          this.btn1 = false;
          this.$toast("亲，手机是不是欠费！");
        }
      })
    },
    findPass() {
      //密码修改
      this.axios.post("api/user/findpass.do", this.user).then((r) => {
        if (r.data.code == 200) {
          //成功 跳转到首页
          this.$router.push("/");
        } else {
          this.$toast(r.data.msg);
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
